<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
    <script type="text/javascript" src="../../static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../static/js/user.js"></script>
    <script type="text/javascript" src="../../static/js/main.js"></script>
    <title>hy的web</title>
</head>
<body>
<header>
    <!--头部-->
    <div class="box">
        <img src="../../static/img/logo.png" class="logo">
        <!--导航栏-->
        <div class="right bar">
            <!--选项-->
            {%if user.admin == true%}
            <a href="{{ url_for('admin_blu.admin') }}" class="admin_b"><img src="../../static/img/admin.png"></a>
            {%endif%}
            <a href="{{ url_for('index_blu.index') }}" class="home_b"><img src="../../static/img/home.png"></a>
            <a href="{{ url_for('user_blu.user_write_new') }}"><img src="../../static/img/write.png"></a>
            <a href="{{ url_for('user_blu.user') }}" class="ava_b"><img src="{{user.avatar_url}}"></a>
            {%if user%}
            <a href="/passport/logout"><img src="../../static/img/logout.png"></a>
            {%endif%}
        </div>
    </div>
</header>
<div class="user_box">
    <div class="box">
        <ul class="left">
            <li class="user_box_name">{{user.nick_name}}</li>
            <li class="user_box_sign">{{user.sign}}
            </li>
        </ul>
        <img src="{{user.avatar_url}}">
        <table class="right user_table">
            <tr>
                <td>文章</td>
                <td>收藏</td>
                <td>粉丝</td>
                <td>关注</td>
            </tr>
            <tr>
                <td>{{user.article.count()}}</td>
                <td>{{user.collects.count()}}</td>
                <td>{{user.fans.count()}}</td>
                <td>{{user.focus.count()}}</td>
            </tr>
        </table>
    </div>


</div>
<div class="box centre">
    <div class="left user_classify">
        <ul>
            <li class="personal_b">个人资料</li>
            <hr>
            <li class="article_b">我的文章</li>
            <hr>
            <li class="collect_b">我的收藏</li>
            <hr>
            <li class="fans_b">我的粉丝</li>
            <hr>
            <li class="focus_b">我的关注</li>
        </ul>
    </div>
    <div class="right user_detail">
        <!--个人资料-->
        <div class="personal" style="display: block">
            <h3>个人资料</h3><a class="right change_detail">编辑资料</a>
            <hr>
            <form>
                <ul class="left left_li ">
                    <li>头&nbsp;&nbsp;&nbsp;像：</li>
                    <li>昵&nbsp;&nbsp;&nbsp;称：</li>
                    <li>签&nbsp;&nbsp;&nbsp;名：</li>
                    <li>手机号：</li>
                    <li>性&nbsp;&nbsp;&nbsp;别：</li>
                    <li>&nbsp;</li>
                </ul>
                <ul class="left user_detail_show">
                    <li><img src="{{user.avatar_url}}"></li>
                    <li>{{user.nick_name}}</li>
                    <li>{{user.sign}}</li>
                    <li>{{user.phone}}</li>
                    {%if user.sex=="2"%}
                    <li>女</li>
                    {%else%}
                    <li>男</li>
                    {%endif%}
                </ul>
                <ul class="left user_detail_change" style="display: none">
                    <li><input type="file" class='avatar_url' id='change_avatar_url'></li>
                    <li><input placeholder="{{user.nick_name}}" class='nick_name'></li>
                    <li><input placeholder="{{user.sign}}" class='sign'></li>
                    <li><input placeholder="{{user.phone}}" class='phone'></li>
                    <li class="input_r">
                        {%if user.sex == '2'%}
                        　　<input type="radio" class="sex" name="sex" value="1"/>男
                        　　<input type="radio" class="sex" name="sex" value="2" checked/>女
                        {%else%}
                        　　<input type="radio" class="sex" name="sex" value="1" checked/>男
                        　　<input type="radio" class="sex" name="sex" value="2"/>女
                        {%endif%}


                    </li>
                    <li><input type="submit" value="确认" class="left"></li>
                </ul>

            </form>
        </div>
        <!--我的文章-->
        <div class="article">
            <h3>我的文章</h3><a class="right" href="{{ url_for('user_blu.user_write_new') }}">写文章</a>
            <hr>
            <br><br>
            <ul class="blog_list">
                {% for i in user.article %}
                <li class="blog">
                    <a href="/to_detail/{{i.id}}" class="article_title">
                        <h3>{{i.title[:30]}}
                            {%if i.title[30:]%}
                            ...
                            {%endif%}
                        </h3>
                    </a>
                    {{i.content[:30]}}......
                    <br><br>
                    <a href="/user/user_write/{{i.id}}" class="left">&nbsp;&nbsp;修改</a>
                    <a class="left" onclick="delete_article(this)" value={{i.id}}>&nbsp;&nbsp;删除</a>
                    <ul href="#" class="right">
                        <li><img src="../../static/img/coll.png">{{i.collector.count()}}<!--收藏--></li>
                        <li><img src="../../static/img/like.png">{{i.praise.count()}}
                            <!--点赞--></li>
                        <li><img src="../../static/img/clicks.png">{{i.clicks}}<!--浏览--></li>
                    </ul>
                </li>
                {% endfor %}
            </ul>
        </div>
        <!--我的收藏-->
        <div class="collect">
            <h3>我的收藏</h3>
            <hr>
            <ul class="blog_list">
                {% for i in user.collects %}
                <li class="blog">
                    <a href="/to_detail/{{i.id}}" class="article_title"><h3>{{i.title}}</h3></a>
                    {{i.content[:30]}}......
                    <br><br>
                    <a href="/to_writer/{{i.user_id}}" class="left article_writer"><img src="{{i.user.avatar_url}}">{{i.user.nick_name}}</a>
                    <ul href="#" class="right">
                        <li><img src="../../static/img/coll.png">{{i.collector.count()}}<!--收藏--></li>
                        <li><img src="../../static/img/like.png">{{i.praise.count()}}
                            <!--点赞--></li>
                        <li><img src="../../static/img/clicks.png">{{i.clicks}}<!--浏览--></li>
                    </ul>
                </li>
                {% endfor %}
            </ul>
        </div>
        <!--我的粉丝-->
        <div class="fans f">
            <h3>我的粉丝</h3>
            <hr>
            <table>
                {% for i in user.fans %}
                <tr>
                    <td><img src="{{i.avatar_url}}"></td>
                    <td>{{i.nick_name}}</td>
                    <td colspan="10">&nbsp;</td>
                    <td class="follow_writer" value={{i.id}}>
                        {%if i not in user.focus%}
                        <a href="#">关注</a>
                        {%else%}
                        <a href="#">取消关注</a>
                        {%endif%}
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
        <!--我的关注-->
        <div class="focus f">
            <h3>我的关注</h3>
            <hr>
            <table>
                {% for i in user.focus %}
                <tr>
                    <td><img src="{{i.avatar_url}}"></td>
                    <td>{{i.nick_name}}</td>
                    <td colspan="10">&nbsp;</td>
                    <td class="follow_writer" value={{i.id}}>
                        {%if i not in user.fans%}
                        <a href="#">关注</a>
                        {%else%}
                        <a href="#">取消关注</a>
                        {%endif%}
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>

    </div>
</div>
</body>
</html>